<template>
  <view class="comment-page">
    <!-- 页面标题 -->
    <view class="page-header">
      <text>立即评价</text>
    </view>

    <!-- 服务评分 -->
    <view class="comment-section">
      <text class="section-title">服务评分</text>
      <view class="shop-name">{{shopName}}</view>
      <view class="rating-container">
        <view 
          class="star" 
          v-for="(star, index) in stars" 
          :key="index"
          @click="setRating(index + 1)"
        >
          <image 
            :src="index < rating ? '/static/order/实心星星.png' : '/static/order/空心星星.png'" 
            mode="aspectFit"
          ></image>
        </view>
      </view>
    </view>

    <!-- 评语输入 -->
    <view class="comment-section">
      <text class="section-title">评语（0-200字）</text>
      <textarea 
        class="comment-input" 
        v-model="content" 
        placeholder="请写下您的意见和建议..." 
        maxlength="200"
        @input="handleInput"
      ></textarea>
      <text class="word-count">{{content.length}}/200</text>
    </view>

    <!-- 照片上传 -->
    <view class="comment-section">
      <text class="section-title">照片（选填）</text>
      <view class="upload-hint">上传照片</view>
      <view class="image-list">
        <view 
          class="image-item" 
          v-for="(image, index) in images" 
          :key="index"
        >
          <image :src="image" mode="aspectFill" class="uploaded-image"></image>
          <view class="delete-btn" @click="removeImage(index)">
            <image src="/static/order/删除图片.png" mode="aspectFit"></image>
          </view>
        </view>
        <view 
          class="upload-btn" 
          v-if="images.length < 9" 
          @click="chooseImage"
        >
          <image src="/static/order/添加图片.png" mode="aspectFit"></image>
        </view>
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-btn" @click="submitComment">
      <text>提交</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 订单ID
const orderId = ref('')
// 店铺信息
const shopName = ref('')
// 评分
const rating = ref(5)
// 评语
const content = ref('')
// 上传的图片
const images = ref([])
// 星星总数
const stars = ref([1, 2, 3, 4, 5])

// 获取订单ID
onLoad((options) => {
  if (options.orderId) {
    orderId.value = options.orderId
	console.log(orderId.value)
    // 这里可以获取订单详情
    // fetchOrderDetail(options.orderId)
  }
})

// 设置评分
const setRating = (value) => {
	console.log(value)
  rating.value = value
}

// 输入处理
const handleInput = (e) => {
	console.log(e.detail.value)
  content.value = e.detail.value
}

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 9 - images.value.length,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      images.value = [...images.value, ...res.tempFilePaths]
    }
  })
}

// 删除图片
const removeImage = (index) => {
  images.value.splice(index, 1)
}

// 提交评价
const submitComment = () => {
  if (rating.value === 0) {
    uni.showToast({
      title: '请为服务评分',
      icon: 'none'
    })
    return
  }

  if (content.value.length < 10) {
    uni.showToast({
      title: '评语至少10个字',
      icon: 'none'
    })
    return
  }

  uni.showLoading({
    title: '提交中...'
  })

  // 模拟API请求
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '评价成功',
      icon: 'success'
    })
    
    // 返回上一页并刷新订单状态
    const pages = getCurrentPages()
    if (pages.length > 1) {
      const prevPage = pages[pages.length - 2]
      prevPage.$vm.refreshOrders && prevPage.$vm.refreshOrders()
    }
    
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  }, 2000)
}
</script>



<style lang="scss">
.comment-page {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
  box-sizing: border-box;
  padding-bottom: 120rpx;
}

.page-header {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 40rpx;
  text-align: center;
}

.comment-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  
  .section-title {
    font-size: 30rpx;
    font-weight: bold;
    display: block;
    margin-bottom: 20rpx;
  }
  
  .shop-name {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 30rpx;
  }
}

.rating-container {
  display: flex;
  justify-content: center;
  margin: 30rpx 0;
  
  .star {
    margin: 0 15rpx;
    
    image {
      width: 60rpx;
      height: 60rpx;
    }
  }
}

.comment-input {
  width: 100%;
  height: 200rpx;
  background-color: #f9f9f9;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
  margin-bottom: 15rpx;
}

.word-count {
  font-size: 24rpx;
  color: #999;
  text-align: right;
  display: block;
}

.upload-hint {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 20rpx;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  
  .image-item, .upload-btn {
    width: 160rpx;
    height: 160rpx;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
    position: relative;
    
    &:nth-child(4n) {
      margin-right: 0;
    }
    
    image {
      width: 100%;
      height: 100%;
      border-radius: 8rpx;
    }
  }
  
  .upload-btn {
    background-color: #f9f9f9;
    display: flex;
    justify-content: center;
    align-items: center;
    
    image {
      width: 60rpx;
      height: 60rpx;
    }
  }
  
  .delete-btn {
    position: absolute;
    top: -10rpx;
    right: -10rpx;
    width: 40rpx;
    height: 40rpx;
    background-color: #ff4d4f;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    
    image {
      width: 20rpx;
      height: 20rpx;
    }
  }
}

.submit-btn {
  position: fixed;
  bottom: 30rpx;
  left: 30rpx;
  right: 30rpx;
  height: 90rpx;
  background-color: #2196f3;
  color: #fff;
  border-radius: 45rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  font-weight: bold;
}
</style>